<template>
	<view class="bg-white">
		<view class="u-flex u-row-center">
			<!--  activeColor '#2979ff', '#ff9900', '#19be6b' -->
			<u-dropdown :close-on-click-mask="true" ref="uDropdown" :activeColor="activeColor" :borderBottom="borderBottom">
				<u-dropdown-item @change="dropdown" v-model="value" :title="label" :options="options"></u-dropdown-item>
			</u-dropdown>
		</view>
	</view>
</template>
<script>
	export default {
		components: {
		},
		data() {
			return {
				value: '0',
				label: '默认排序',
				options: [{
						label: '热度优先',
						value: 0,
					},
					{
						label: '最新活动',
						value: 1,
					}
				],
				borderBottom: false,
				activeColor: '#2979ff',
			}
		},
		methods: {
			dropdown(index) {
				console.log(index)
				this.label = this.options[index].label
				this.$emit('chooseOrder', index)
				// this.$u.toast(`点击了第${index}项`);
			},

		}
	}
</script>

<style scoped lang="scss">
	.slot-content {
		background-color: #FFFFFF;
	}

	.item-box {
		margin-bottom: 50rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 24rpx;

		.item {
			border: 1px solid $u-type-primary;
			color: $u-type-primary;
			padding: 8rpx 40rpx;
			border-radius: 100rpx;
			margin-top: 30rpx;
		}

		.active {
			color: #FFFFFF;
			background-color: $u-type-primary;
		}
	}
</style>
